<template>
    <div>
        <Card class="search" shadow>
            <Form :label-width="80" inline>
                <FormItem label="姓名">
                    <Input v-model="listQuery.realName" placeholder="请输入姓名"/>
                </FormItem>
                <FormItem label="用户名">
                    <Input v-model="listQuery.username" placeholder="请输入用户名"/>
                </FormItem>
                <Button type="success" @click="search">搜索</Button>
            </Form>
        </Card>
        <Card shadow>
            <div class="tb-header">
                <RefreshButton :refreshList="refresh"></RefreshButton>
                <Button type="primary" size="small" icon="md-add" style="margin-right: 5px" @click="add">新增</Button>
            </div>
            <Row>
                <Col span="4">
                    <Tree :data="treeData" @on-select-change="onSelectChange" style="border: 1px dotted #e8eaec"></Tree>
                </Col>
                <Col span="20">
                    <Table :height="400" size="small" :columns="columns" :data="tableData">
                        <template slot-scope="{ row, index }" slot="action">
                            <Button type="primary" size="small" @click="edit(row)" style="margin-right: 5px">
                                编辑
                            </Button>
                            <Button disabled type="error" size="small" @click="del(row.id)" style="margin-right: 5px">
                                删除
                            </Button>
                        </template>
                    </Table>

                    <Pagination
                            ref="pagination"
                            size="small"
                            :sizer="true"
                            :page.sync="listQuery.pageNumber"
                            :rows.sync="listQuery.pageSize"
                            :total="total"
                            @on-change="getTableData"/>
                </Col>
            </Row>
        </Card>

        <Modal v-model="showModel" width="600px" @on-ok="submit" @on-cancel="showModel=false">
            <p slot="header">
                编辑[
                <Icon type="ios-information-circle" style="color: #f60;"></Icon>
                <span style="color: #f60;">初始密码123456</span>]
            </p>
            <Form v-model="formData" ref="formInline" :label-width="80" inline>
                <Row>
                    <Col span="12">
                        <FormItem label="姓名">
                            <Input v-model="formData.realName" placeholder="请输入姓名"/>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="性别">
                            <RadioGroup v-model="formData.sex">
                                <Radio :label="1">男</Radio>
                                <Radio :label="0">女</Radio>
                            </RadioGroup>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                        <FormItem label="编号">
                            <Input v-model="formData.code" placeholder="请输入编号"/>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="用户名">
                            <Input v-model="formData.username" placeholder="请输入用户名"/>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                        <FormItem label="电话">
                            <Input v-model="formData.phone" placeholder="请输入电话"/>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="邮箱">
                            <Input v-model="formData.email" placeholder="请输入邮箱"/>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                        <FormItem label="状态">
                            <RadioGroup v-model="formData.status">
                                <Radio :label="1">启用</Radio>
                                <Radio :label="0">禁用</Radio>
                            </RadioGroup>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="角色">
                            <Select v-model="formData.roles" style="width: 175px" multiple filterable>
                                <Option v-for="item in roleList" :value="item" :key="item.id">{{ item.roleName }}
                                </Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="24">
                        <FormItem label="备注" style="width: 95%">
                            <Input type="textarea" v-model="formData.note" placeholder="请输入备注"/>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
        </Modal>
    </div>
</template>

<script>
    import {findPage, addOrUpdate, departTree} from '@/api/user';
    import {findList} from '@/api/role';
    import Pagination from '../components/Pagination' // 分页插件
    import RefreshButton from '../components/RefreshButton' // 分页插件

    export default {
        name: "User",
        components: {
            Pagination, RefreshButton
        },
        data() {
            return {
                columns: [
                    {
                        title: '头像',
                        key: 'avatar',
                        render: (h, params) => {
                            return h('viewer', [
                                h('img', {
                                    attrs: {
                                        src: "data:image/jpeg;base64," + params.row.avatar
                                    },
                                    style: {
                                        width: '50px',
                                        height: '50px'
                                    }
                                })
                            ])
                        }
                    },
                    {
                        title: '姓名',
                        key: 'realName'
                    },
                    {
                        title: '用户名',
                        key: 'username'
                    },
                    {
                        title: '编号',
                        key: 'code'
                    },
                    {
                        title: '邮箱',
                        key: 'email'
                    },
                    {
                        title: '电话',
                        key: 'phone'
                    },
                    {
                        title: '性别',
                        key: 'sex',
                        render: (h, params) => {
                            return h('span', params.row.sex == 0 ? '女' : '男')
                        }
                    },
                    {
                        title: '状态',
                        key: 'status',
                        render: (h, params) => {
                            return h('span', params.row.status == 0 ? '禁用' : '启用')
                        }
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 200,
                        align: 'center'
                    }
                ],
                tableData: [],
                treeData: [],
                listQuery: {
                    pageNumber: 1,
                    pageSize: 10,
                    realName: "",
                    username: ""
                },
                total: 0,
                showModel: false,
                formData: {
                    password: 123456
                },
                roleList: [],
            }
        },
        created() {
            this.getTableData();
            this.getTreeData();
        },
        methods: {
            refresh(){
                this.getTableData();
                this.getTreeData();
            },
            async getTableData() {
                this.tableData = [];
                this.total = 0;
                let params = this.listQuery
                let res = await findPage(params);
                if (res.success) {
                    this.tableData = res.result.records;
                    this.total = res.result.total;
                }
            },
            async getTreeData() {
                this.treeData = [];
                let params = {}
                let res = await departTree(params);
                if (res.success) {
                    this.treeData = res.result;
                }
            },
            async getRoleData() {
                this.roleList = [];
                let params = {}
                let res = await findList(params);
                if (res.success) {
                    this.roleList = res.result;
                }
            },
            add() {
                this.showModel = true;
                this.formData = {};
                this.getRoleData()
            },
            edit(row) {
                this.showModel = true;
                this.formData = row;
                this.getRoleData()
            },
            async submit() {
                this.$refs['formInline'].validate(async valid => {
                    if (valid) {
                        let res = await addOrUpdate(this.formData);
                        if (res.success) {
                            this.$layer.msg(res.message, {icon: 1, time: 3});
                            this.getTableData();
                        }
                    }
                });
            },
            del(id) {
                this.$layer.msg("删除成功", {icon: 1, time: 3});
            },
            search() {
                this.getTableData();
            },
            onSelectChange(e) {
                console.log("e--", e);
            }
        }
    }
</script>

<style scoped>

</style>
